<template>
  <div>
    <div class="sort-wrapper flex-h flex-vc">
      <span
        :class="sort===1?'sort-active':'sort-inactive'"
        @click="getBalanceList(1)"
      >全部</span>
      <span
        :class="sort===2?'sort-active':'sort-inactive'"
        @click="getBalanceList(2)"
      >收入</span>
      <span
        :class="sort===3?'sort-active':'sort-inactive'"
        @click="getBalanceList(3)"
      >支出</span>
    </div>

    <scroll
      ref="scroll"
      :getListData="getListDataByScroll"
      :noDataText="noDataText"
    >
      <div
        v-for="(item,index) in dataList"
        v-bind:key="index"
      >
        <cell
          :name="item.name"
          :date="item.date"
          :money="item.money"
          :out="item.out"
        />
      </div>
    </scroll>
  </div>
</template>

<script>
import ScrollWithNet from '../../../components/scroll/ScrollWithNet'
import BalanceCell from '../components/BalanceCell'
export default {
  components: {
    'scroll': ScrollWithNet,
    'cell': BalanceCell
  },
  data() {
    return {
      sort: 1,
      dataList: [],
      noDataText: '无数据'
    }
  },
  methods: {
    getBalanceList: function (sort) {
      this.sort = sort
    },
    // 通过滚动上拉获取数据
    getListDataByScroll(pageIndex, pageSize) {
      let state = this.filterState
      if (state === -1) {
        state = null
      }
      return new Promise((resolve, reject) => {
        let list = []
        for (let index = 0; index < 10; index++) {
          list.push({ name: index % 2 === 0 ? '发布询价单' : '接单', date: '2019-03-07 14:22', money: '2.90', out: index % 2 === 0 })
        }
        if (pageIndex === 1) {
          this.dataList = list
        } else {
          this.dataList = this.dataList.concat(list)
        }
        setTimeout(() => {
          resolve({ length: 10, count: 10 })
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
.sort-wrapper {
  width: 750px;
  height: 80px;
  background: rgb(245, 245, 245);
}
.sort-wrapper > span {
  font-size: 13px; /*no*/
  line-height: 18px; /*no*/
  padding: 0px 70px 0px 30px;
}

.sort-active {
  color: #28acff;
}
.sort-inactive {
  color: #999;
}
</style>
